<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #wy {
        width: 300px;
        height: 300px;
        margin: auto;
      }
      #top {
        width: 100%;
        height: 40px;
        background-color: aquamarine;
        color: #000;
        line-height: 40px;
      }
      li {
        list-style: none;
        margin: 0;
        padding: 0;
        margin-top: 10px;
      }
      li:hover {
        background-color: cornsilk
      }
      a {
        text-decoration: none;
      }
      #bottom {
        width: 100%;
        height: 250px;
        background-color: cadetblue;
        margin-top: -16px;
      }
    </style>
  </head>
  <body>
    <div id="wy">
      <div id="top">&emsp;播放列表...</div>
      <div id="bottom">
        <ul>
          <li>
            <a href="javascript:;">我太笨 (remix:锤娜丽莎|翻奏:DJMYX) - 鬼厉</a>
          </li>
          <li>
            <a href="javascript:;">Love Story (混音|1989 Remix) - Alvaro</a>
          </li>
          <li><a href="javascript:;">反方向的钟 - 周杰伦</a></li>
          <li><a href="javascript:;">多远都要在一起 - 邓紫棋</a></li>
          <li><a href="javascript:;">黑夜问白天 - 林俊杰</a></li>
          <li><a href="javascript:;">Big Words (Extended Mix) - Klaas</a></li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    function wy() {
      var top = document.getElementById("top");
      var bottom = document.getElementById("bottom");
      top.onclick = function () {
        //    console.log(bottom.style.display);
        if (bottom.style.display == "none") {
          bottom.style.display = "block";
        } else {
          bottom.style.display = "none";
        }
      };
      for (let i = 0; i < bottom.length; i++) {}
    }
    wy();
  </script>
</html>
